<script setup lang='ts'>
// import { accessToken, userCurrentUserInfo } from '@fl/api/bidding-api'
import VueOfficePdf from '@vue-office/pdf'
import { useUserStore } from '@fl/store/modules/user'
import { getEnv } from '@fl/utils/env'
import { useUserStoreWithOut } from '@fl/store/modules/user'
import Cookie from 'js-cookie'
import menuNav from '@/components/menu-nav.vue'
import { contractList, contractByFileKey } from '@fl/api/user-api'

// const { query } = useRoute()
// const VITE_STORE_PREFIX = 'AnJuMall'
// export function getCommonStoragePrefix() {
//     return `${import.meta.env.VITE_STORE_PREFIX.replace(/\s/g, '_')}__${getEnv()}`
// }
// const { push } = useRouter()
// const userStore = useUserStore()
// userStore.userInfo
const userStore = useUserStoreWithOut()
const phone = userStore.getUserInfo.mobile
const visible = ref(false)
const list = ref([])
const loading = ref(false)
const pdfUrl = ref('')

getContractList()
function getContractList() {
    loading.value = true
    contractList({phone}).then(data=>{
        loading.value = false
        list.value = data.rows
    })
}

// const handleSizeChange = (val: number) => {
//   console.log(`${val} items per page`)
// }
// const handleCurrentChange = (val: number) => {
//   console.log(`current page: ${val}`)
// }
function previewPdf(fileKey) {
    contractByFileKey({fileKey}).then(data=>{
        const url = `https://view.officeapps.live.com/op/view.aspx?src=${data}`
        pdfUrl.value = data
        visible.value = true
    })
}

function rendered(){
    console.log("渲染完成")
}
</script>

<template>
    <div class="contract-list">
        <div class="right-content">
            <h3>我的合同</h3>
            <div class="content">
                <div class="contract-list" v-loading="loading" v-if="list.length">
                    <div class="contract-item" v-for="item in list" :key="item" @click="previewPdf(item.fileKey)">
                        <img width="48" src="/assets/pdf_pic.png" />
                        <div class="contract-info">
                            <div class="contract-name">{{ item.contractTitle}}</div>
                            <ul class="info">
                                <li>
                                    <div class="data">
                                        <div class="label">合同编号</div>
                                        <div class="value">{{item.contractNumber}}</div>
                                    </div>
                                    <div class="data">
                                        <div class="label">修改时间</div>
                                        <div class="value">{{ item.updateTime }}</div>
                                    </div>
                                </li>
                                <li>
                                    <div class="data">
                                        <div class="label">买受人</div>
                                        <div class="value">{{ item.custName }}</div>
                                    </div>
                                    <div class="data">
                                        <div class="label">出卖人</div>
                                        <div class="value">{{ item.companyName }}</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div :class="`tag state${item.state}`">{{ ['预签约', '待签章', '已签章', '已备案'][ item.state ]}}</div>
                    </div>
                </div>
                <div class="no-data" v-else>
                    <img width="160" src="/assets/empty_pic.png" alt="" />
                </div>
            </div>
            <!-- <div class="pagination" v-show="list.length">
                <el-pagination 
                    background 
                    layout="prev, pager, next, jumper, total, sizes, prev-text, next-text"
                    :total="1000" 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div> -->
        </div>
        <el-dialog v-model="visible" fullscreen append-to-body>
            <template #header>
            <p class="dialogheader">查看合同</p>
            </template>
            <VueOfficePdf 
            :src="pdfUrl"
            style="height: 100vh;"
            @rendered="rendered"
            ></VueOfficePdf>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
.contract-list {
 
    .right-content {
        flex: 1;
        margin-left: 20px;
        border-radius: 8px;
        padding: 40px;
        background-color: #fff;
        > h3 {
            height: 32px;
            color: #1D2129;
            font-weight: 600;
            font-size: 20px;
            border-left: 4px solid #DA0004;
            padding-left: 12px;
        }
        > .content {
            height: calc(100vh - 400px);
            overflow-y: auto;
         }
        .contract-list {
            background-color: #fff;
            margin-top: 24px;
            width: 100%;
            .contract-item {
                width: 100%;
                display: flex;
                height: 102px;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                background-color: #F7F8FA;
                margin-bottom: 12px;
                border-radius: 4px;
                cursor: pointer;
                .contract-info {
                    margin-left: 12px;
                    .contract-name {
                        color: #3D3D3D;
                        font-size: 16px;
                        width: 750px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    > .info {
                        font-size: 14px;
                        > li {
                            display: flex;
                            width: 100%;
                            justify-content: space-between;
                            padding-top: 8px;
                            > .data {
                                flex: 1;
                                display: flex;
                                > .label {
                                    color: #86909C;
                                    width: 80px;
                                    text-align: right;
                                }
                                > .value {
                                    color: #4E5969;
                                    padding-left: 8px;
                                }
                            }
                        }
                    }
                }
                .tag {
                    width: 58px;
                    white-space: nowrap;
                    color: #fff;
                    font-size: 14px;
                    height: 24px;
                    line-height: 24px;
                    border-radius: 2px;
                    text-align: center;
                    &.state0 {
                        background-color: #DA0004;
                    }
                    &.state1 {
                        background-color: #E9810B;
                    }
                    &.state2 {
                        background-color: #1094A3;
                    }
                    &.state3 {
                        background-color: #18B918;
                    }
                }
            }
        }
        .no-data {
            display: flex;
            justify-content: center;

        }
        .pagination {
            margin-top: 4px;
            display: flex;
            justify-content: center;
        }
    }
}
.preview-iframe {
    width: 100%;
    height: 100vh;
}
</style>
